<template>
  <div class="strong-date-picker-input">
    <div class="middle">
      <div v-if="!hasValue" class="placeholder">{{ placeholder }}</div>
      <div v-else-if="lastActive" class="value">
        最近 {{ getStrBySecond(lastActive) }}
      </div>
      <div v-else class="date-range">
        <div class="value">{{ formatDate(modelValue[0]!) }}</div>
        <img class="icon-middle" :src="MiddleSvg" alt="" />
        <div class="value">{{ formatDate(modelValue[1]!) }}</div>
      </div>
    </div>
    <i class="prefix">
      <img :src="TimeSvg" alt="" />
    </i>
    <!-- <i class="suffix">
      <close-icon
        v-if="clearable && hasValue"
        class="icon-clearable"
        @click.stop="emit('clear')" />
      <img class="icon-down-arrow" :src="DownArrowSvg" alt="" />
    </i> -->
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'

// import CloseIcon from './icons/CloseIcon.vue'
// import DownArrowSvg from './icons/down-arrow.svg'
import MiddleSvg from './icons/middle.svg'
import TimeSvg from './icons/time.svg'
import type { DatePickValue } from './types'
import { formatDate, getStrBySecond } from './utils'

const props = defineProps<{
  placeholder?: string
  clearable: boolean
  lastActive?: number
  modelValue: DatePickValue
}>()

// const emit = defineEmits<{
//   clear: []
// }>()

const hasValue = computed(() => props.modelValue.filter(Boolean).length === 2)
</script>
